.tips {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  .container {
    margin-top: 10vh;
    height: 70%;
    width: 50%;
    background: tan;
    box-shadow: 0 0 50px tan;

    .tip {
      height: 300px;
      width: 150px;
      background-color: white;
      color: black;
      box-shadow: 0 10px 10px rgba(0, 0, 0, 0.431);
      padding: 10px;
      position: absolute;

      .tip-header {
        text-align: center;
      }

      .tip-inside {
        height: 90%;
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.418);
      }
    }

    .tip0 {
      top: 10%;
      left: 50%;
    }

    .tip1 {
      top: 20%;
      left: 40%;
    }

    .tip2 {
      top: 10%;
      left: 30%;
    }

    .tip3 {
      top: 30%;
      left: 60%;
    }
  }
}
